<template>
  <el-dialog :modelValue="show" title="后台账号" :close-on-click-modal="false" :close-on-press-escape="false" top="20vh"
    @close="handleClose">
    <el-form :model="data.addQuery" ref="addQuery" :validate-on-rule-change="false" :rules="data.rules" :scroll-to-error="true" v-loading="indexStore.moduleLoading">
      <form-item title="账号昵称" :pass="true" value="nickname">
        <el-input type="text" v-model="data.addQuery.nickname" placeholder="请输入账号昵称" clearable maxlength="50" />
        <span class="tipsText">(后台账号的描述昵称)</span>
      </form-item>
      <form-item title="后台账号" :pass="true" value="username">
        <el-input type="text" v-model="data.addQuery.username" placeholder="请输入后台账号" clearable maxlength="50"
          :disabled="data.addQuery.id ? true : false" />
          <span class="tipsText">(后台登录账号)</span>
      </form-item>
      <form-item title="账号密码" :pass="data.rules.password[0].required" value="password">
        <el-input type="text" v-model="data.addQuery.password" placeholder="请输入账号密码" clearable maxlength="50" />
        <span class="tipsText">(后台登录账号密码)</span>
      </form-item>
      <form-item title="账号角色" :pass="true" value="role_id">
        <el-select v-model="data.addQuery.role_id" filterable placeholder="请选择账号角色" clearable>
          <el-option v-for="(item, index) in data.roleList" :key="item.id" :label="item.role_name" :value="item.id" />
        </el-select>
        <span class="tipsText">(该账号所属的角色权限)</span>
      </form-item>
      <form-item title="锁定" value="status">
        <el-radio-group v-model="data.addQuery.status" size="large">
          <el-radio-button label="锁定" :value="0" />
          <el-radio-button label="未锁定" :value="1" />
        </el-radio-group>
        <span class="tipsText">(锁定后该账号无法登录后台)</span>
      </form-item>
      <GoogleCaptcha ref="GoogleRef" :googleShow="true" :checkedItem="data.addQuery"/>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch, onMounted } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import GoogleCaptcha from '@/components/GoogleCaptcha.vue'
import { systemChangeManager, systemAddManager, systemRoleList } from '@/api/user'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const data = reactive({
  addQuery: {
    id: 0,
    username: '',
    password: '',
    nickname: '',
    role_id: '',
    status: 1,
    white_ip: '',
    google_check: 0, // IP白名单
    google_url: '', // 谷歌二维码
    google_secret: '', // 谷歌二维码
    google_code: 0, // 谷歌验证码
  },
  rules: {
    nickname: [{ required: true, message: '请输入', trigger: 'blur' }],
    username: [{ required: true, message: '请输入', trigger: 'blur' }],
    password: [
      { required: true, message: '请输入', trigger: 'blur' },
      { min: 6, max: 20, message: '请输入6-20位字符', trigger: 'blur' }
    ],
    role_id: [{ required: true, message: '请选择', trigger: 'change' }],
    status: [{ required: true, message: '请选择', trigger: 'change' }],
  },
  roleList: [] as any[]
})


const addQuery = ref<FormInstance>()
watch(
  () => props.checkedItem,
  async (val) => {
    getRoleList()
    if (val.id) {
      data.addQuery = Object.assign(data.addQuery, props.checkedItem)
      data.rules.password[0].required = false
    } else {
      data.rules.password[0].required = true
      addQuery.value?.resetFields()
      data.addQuery = {
        id: 0,
        username: '',
        password: '',
        nickname: '',
        role_id: '',
        status: 1,
        white_ip: '',
        google_check: 0, // IP白名单
        google_url: '', // 谷歌二维码
        google_secret: '', // 谷歌二维码
        google_code: 0, // 谷歌验证码
      }
    }
  }
)

const save = async () => {
  await addQuery.value?.validate(async (valid: any, fields: any) => {
    if (valid) {
      let query = JSON.parse(JSON.stringify(data.addQuery));
      query = GoogleRef.value.returnGoogle(query)
      if(query.google_check && !query.google_code) {
        return ElMessage.error('请输入谷歌验证码')
      }
      indexStore.setModuleLoading(true)
      const res: any = query.id ? await systemChangeManager(query) : await systemAddManager(query)
      indexStore.setModuleLoading(false)
      if (res.code == 1) {
        ElMessage.success('操作成功')
      }
      emit('onHideDetails', true)
    }
  })
}

// 获取账号角色
const getRoleList = async ()=>{
  const roleList = await systemRoleList({ role_name: '', page: 1, size: 999 })
  data.roleList = roleList.data.list
}

// 取消
const GoogleRef = ref<any>()
const emit = defineEmits(['onHideDetails'])
const handleClose = async () => {
  GoogleRef.value.onHideDetails()
  emit('onHideDetails', false)
}
</script>

<style lang="scss" scoped></style>
